<template>
    <FpiElPageLayout title="组件测试">
        <ElScrollbar>
            <div style="padding-bottom: 400px; padding-left: 200px">
                <div class="mr-b-16">
                    <h2 class="mr-b-6">按钮</h2>
                    <ElButton type="primary">Primary</ElButton>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Icon图标</h2>
                    <ElIcon><House /></ElIcon>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Link链接</h2>
                    <ElLink :underline="false" type="primary">primary</ElLink>
                    <ElLink :underline="false" type="primary">info</ElLink>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">自动补全输入框</h2>
                    <ElAutocomplete placeholder="请输入" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">级联选择器</h2>
                    <ElCascader :options="options" :show-all-levels="false" placeholder="请输入" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">多选框</h2>
                    <ElCheckbox size="small">small</ElCheckbox>
                    <ElCheckbox size="default">default</ElCheckbox>
                    <ElCheckbox size="large">large</ElCheckbox>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">时间选择器</h2>
                    <ElDatePicker placeholder="请输入时间" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">输入框</h2>
                    <ElInput style="width: 200px" placeholder="请输入" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">数字输入框</h2>
                    <ElInputNumber placeholder="请输入" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">单选框</h2>
                    <ElRadioGroup>
                        <ElRadio label="1">ok</ElRadio>
                        <ElRadio label="2">not ok</ElRadio>
                    </ElRadioGroup>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">选择器</h2>
                    <ElSelect>
                        <ElOption
                            v-for="item in options"
                            :key="item.value"
                            :value="item.value"
                            :label="item.label"
                        />
                    </ElSelect>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">虚拟滚动选择器</h2>
                    <ElSelectV2 :height="400" :options="moreOptions" />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">分页器</h2>
                    <ElPagination
                        background
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="1000"
                    />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">表格</h2>
                    <ElTable border stripe :data="list" style="width: 100%">
                        <ElTableColumn prop="date" label="日期" width="180" />
                        <ElTableColumn prop="name" label="名称" width="180" />
                        <ElTableColumn prop="address" label="地址" />
                    </ElTable>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi表格</h2>
                    <FpiElTable
                        border
                        stripe
                        :column="column"
                        :table-data="list"
                        :page-params="pageParams"
                    />
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi表单</h2>
                    <div style="width: 600px">
                        <FpiElForm
                            ref="ruleFormRef"
                            v-model="formData"
                            :form-option="formOption"
                            label-width="160px"
                        />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi季度选择组件</h2>
                    <div style="width: 600px">
                        <FpiElQuarterPicker v-model="quarterDate" />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi季度范围选择组件</h2>
                    <div style="width: 600px">
                        <FpiElQuarterRangePicker v-model="quarterRangeDate" />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi年度范围选择组件</h2>
                    <div style="width: 600px">
                        <FpiElYearRangePicker v-model="yearRangeDate" />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi分割进度组件</h2>
                    <div style="width: 600px; height: 10px">
                        <FpiElGridProgressBar
                            :value="55.7"
                            check-color="#F84439"
                            background-color="rgba(0, 0, 0, 0.1)"
                            :grid-width="2"
                            :grid-mid="1"
                        />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">Fpi分割进度组件</h2>
                    <div style="width: 600px">
                        <FpiElCronTab />
                    </div>
                </div>
                <div class="mr-b-16">
                    <h2 class="mr-b-6">组合时间选择器</h2>
                    <div>
                        <FpiElCombineDatePicker v-model="combineDate" />
                    </div>
                </div>
            </div>
        </ElScrollbar>
    </FpiElPageLayout>
</template>

<script setup lang="ts">
import { House } from '@element-plus/icons-vue'

const options = [
    {
        value: 'guide',
        label: 'Guide',
    },
    {
        value: 'component',
        label: 'Component',
    },
    {
        value: 'resource',
        label: 'Resource',
    },
    {
        value: 'guide1',
        label: 'Guide1',
    },
    {
        value: 'component1',
        label: 'Component1',
    },
    {
        value: 'resource1',
        label: 'Resource1',
    },
    {
        value: 'guide2',
        label: 'Guide2',
    },
    {
        value: 'component2',
        label: 'Component2',
    },
    {
        value: 'resource2',
        label: 'Resource2',
    },
    {
        value: 'resource2',
        label: 'Resource2',
    },
    // {
    //     value: 'resource2',
    //     label: 'Resource2',
    // },
    // {
    //     value: 'resource2',
    //     label: 'Resource2',
    // },
    // {
    //     value: 'resource2',
    //     label: 'Resource2',
    // },
]

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const moreOptions = Array.from({ length: 1000 }).map((_, idx) => ({
    value: `Option ${idx + 1}`,
    label: `${initials[idx % 10]}${idx}`,
}))

import type { tableColumnTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-table/types'

const column = shallowRef<tableColumnTs[]>([
    {
        prop: 'date',
        label: '日期',
    },
    {
        prop: 'name',
        label: '名称',
    },
    {
        prop: 'address',
        label: '地址',
    },
])

const list = shallowRef([
    {
        date: '2016-05-03',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-02',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-04',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
    {
        date: '2016-05-01',
        name: 'Tom',
        address: 'No. 189, Grove St, Los Angeles',
    },
])
const pageParams = reactive({
    currentPage: 1,
    total: list.value.length,
    pageSizes: 10,
})

import type { formItemTs } from '@ued_fpi/element-plus-expand/es/src/fpi-el-form/types'
import type { FpiElCombineDatePicker } from '@ued_fpi/element-plus-expand'

const data = reactive({
    formOption: [
        {
            col: [
                {
                    label: '企业名称：',
                    span: 12,
                    type: 'input',
                    prop: 'input1',
                    rules: 'unNull',
                    inputProps: {
                        placeholder: '请选择企业',
                        clearable: true,
                    },
                },
                {
                    span: 12,
                    label: '企业生产状态：',
                    type: 'input',
                    value: null,
                    prop: 'inputNum',
                    rules: 'unNull,number',
                    inputProps: {
                        inputLimit: 'number',
                        clearable: true,
                        placeholder: '',
                    },
                },
            ],
        },
        {
            col: [
                {
                    span: 12,
                    label: '排口名称：',
                    type: 'input',
                    showPassword: true,
                    prop: 'inputPass',
                    rules: 'unNull',
                },
                {
                    span: 12,
                    label: '排口编号：',
                    type: 'input',
                    showPassword: true,
                    prop: 'inputPass',
                    rules: 'unNull',
                    inputProps: {
                        clearable: true,
                        disabled: true,
                    },
                },
            ],
        },
        {
            col: [
                {
                    label: '邮箱：',
                    type: 'input',
                    prop: 'curEmails',
                    rules: 'email',
                },
            ],
        },
        {
            label: '经纬度：',
            required: true,
            gutter: 15,
            col: [
                {
                    span: 5,
                    type: 'input',
                    prop: 'long',
                    rules: 'unNull',
                    inputProps: {
                        clearable: true,
                    },
                },
                {
                    span: 5,
                    type: 'input',
                    prop: 'lat',
                    rules: 'unNull',
                    inputProps: {
                        clearable: true,
                    },
                },
            ],
        },
        {
            col: [
                {
                    label: '是否参与有效率计算：',
                    type: 'radio',
                    prop: 'delivery',
                    value: true,
                    option: [
                        { label: '是', value: true },
                        { label: '否', value: false },
                    ],
                },
            ],
        },
    ] as formItemTs[],
    formData: {
        input1: '',
        inputNum: '',
        inputPass: '',
        delivery: '',
        curEmails: '',
        lat: '',
        long: '',
    },
})

const { formOption, formData } = toRefs(data)

const quarterDate = ref()

const quarterRangeDate = ref()

const yearRangeDate = ref()

const combineDate = ref({
    timeType: 'day',
    time: new Date(),
})
</script>
